<template>
	<div class="navigator-list" :style="[style]">
		<div class="navigator-title">{{ title }}</div>
		<div class="nav">
			<v-menu :list="menuList"></v-menu>
		</div>
	</div>
</template>

<script setup>
import { computed } from "vue"
import { useMenuStore } from "/store/menu"
import VMenu from "../../menu/index.vue"
import { ASIDE_WIDTH } from "/store/setting/constants"
import { useSettingStore } from "/store/setting"
import { title } from "/utils"

const style = computed(() => ({
	width: ASIDE_WIDTH + "px",
}))

const menuStore = useMenuStore()
const settingStore = useSettingStore()
const menuList = computed(() => {
	if (settingStore.navigatorType === "Single Left") {
		return menuStore.menuList
	}
	return menuStore.nowChildrenMenuList
})
</script>

<style lang="scss" scoped>
.navigator-list {
	height: 100%;
	.navigator-title {
		font-size: 12px;
		line-height: 4;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
	}
	.nav {
		height: calc(100% - 48px);
		overflow-y: auto;
	}
}
</style>
